<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-11-23 18:14:43
 * @Description: 
-->
<template>
  <div>
    <Gallery :img-list="imgList" :loop="false"></Gallery>
    <div class="list">
      <div class="mobile-half-linebreak"></div>
      <div class="project-details flex flex-row">
        <div class="textBlockLining project-name">{{ detail.name }}</div>
        <span class="indent"></span>
        <div class="textBlockLining project-name">{{ detail.addr }}</div>
      </div>
    </div>
    <ParallaxBox bgColor="#727267">
      <div v-if="detail.content">
        <div class="linebreak"></div>
        <div class="list">
          <div v-html="detail.content" class="richText w-full h-full"> </div>
        </div>
        <div class="linebreak"></div>
      </div>
    </ParallaxBox>
    <div class="linebreak"></div>
    <div class="list">
      <div class="textBlockLining">更多項目 | More Projects</div>
      <nuxt-link class="link link-textmargin" to="/project">View all</nuxt-link>
      <div class="half-linebreak"></div>
    </div>
    <div class="list fix__col-1-3">
      <div v-for="(item, index) in listData.list" :key="index" class="list__col-1-3" data-aos="fade-up"
        :data-aos-delay="`${index % 3 * 100}`">
        <nuxt-link target="_blank" :to="{
          name: 'project-detail',
          query: { id: item.id }
        }" class="block link link-details hoverAni">
          <div class="thumb">
            <div class="thumb__inner">
              <img :src="$picHander(item.pic, 'zoom_large')" alt="" class="image image--loaded image--full-height" />
            </div>
          </div>
          <div class="half-linebreak"></div>
          <div class="link-textmargin">
            項目名稱：{{ item.name }}
            <br>
            項目地點：{{ item.addr }}
          </div>
        </nuxt-link>
        <div class="linebreak"></div>
      </div>
    </div>
    <div class="dbl-linebreak"></div>
    <div class="flex flex-row justify-center">
      <nuxt-link to="/contact">
        <HoverButtons @click="showForm = true" btnText="Contact Us" />
      </nuxt-link>
    </div>
    <div class="dbl-linebreak"></div>
  </div>
</template>

<script setup>
let detail = ref({});
let imgList = ref([]);
let id = ref(null)
const route = useRoute();
id.value = route.query.id
const { data } = await useFetch(`api/products/${route.query.id}`, {
  baseURL: "/dev-api"
});
if (data.value && data.value.atlas) {
  detail.value = data.value;
  console.log('[ detail.value ] >', detail.value)
  imgList.value = detail.value.atlas.split(",");
}

const result = await useFetch(`api/products`, {
  baseURL: "/dev-api",
  params: {
    category: detail.value.category,
    excludeIds: [id.value]
  }
});
const listData = ref({
  list: [],
})
if (result.data.value) {
  listData.value.list = result.data.value.data.slice(0, 3);
}

const { $picHander } = useNuxtApp()
</script>
<style lang="scss" scoped>
.mobile-half-linebreak {
  height: 2.5vh;
  width: 100%;
  display: none;
}

.project-details {
  padding-bottom: 5vh;
  padding-top: 5vh;
  font-family: "gilroy", Sans-Serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 300;
}

.project-desc {
  font-family: "gilroy", Times New Roman, Serif;
  font-size: 1.6rem;
  line-height: 2.2rem;
  width: 75vw;
  max-width: 1400px;

  img {
    max-width: 100%;
  }
}
</style>